<template>
	<div class="crunch">
		<div class="con">

			<div class="crun_top">
				<ul class="ul">
					<li class="li">
						<p class="yk">客户状态</p>
						<p class="mn">正在跟进</p>
					</li>
					<li class="li">
						<p class="yk">工单状态</p>
						<p class="mn">{{crun_type === 'male' ? '待处理' : '已处理'}}</p>
					</li>
					<li class="li">
						<p class="yk">客户归属</p>
						<p class="mn">赵小刚</p>
					</li>
					<li class="li">
						<p class="yk">客户类型</p>
						<p class="mn">企业客户</p>
					</li>
					<li class="li">
						<p class="yk">首联系人</p>
						<p class="mn">李小红</p>
					</li>
					<li class="li">
						<p class="yk">下次跟进</p>
						<p class="mn">2019-04-15 12:00</p>
						<!-- 使用这个slice使用个错误的，但是还行可以进行使用，微信小程序常用的错误，但是可以在微信小程序中进行展示 -->
					</li>
				</ul>
			</div>

			<div class="crun_bot">
				<scroll-view scroll-x>
					<div class="top">

						<div v-for="item in list" :key="item" :class="active === item ? 'active' : ''"
							@click="tab_tit(item)">
							{{item}}
						</div>
					</div>
				</scroll-view>

				<div class="bot">
					<!-- <Information></Information> -->
					<CrunchBost v-if="active === '客户动态'"></CrunchBost>
					<Informationsss v-if="active === '资料详情'"></Informationsss>
					<Evaluate v-if="active === '任务记录'"></Evaluate>
					<Attachment :crun_author="crun_author" :crun_obj="crun_obj" v-if="active === '相关附件'"></Attachment>
					<Examine v-if="active === '更多信息'"></Examine>
				</div>
			</div>
		</div>
		<u-popup :show="show22" :round="10" mode="bottom" @close="close" @open="open">
			<div class="ulssss">
				<li class="li" @click="pd">普通任务</li>
				<li class="li" @click="xr">跟进任务</li>
			</div>
			<div class="quxn" @click="show22 = false">取消</div>
		</u-popup>
		<u-popup :show="show23" :round="10" mode="bottom" @close="close" @open="open">
			<div class="ulssss">
				<div class="top">
					李小红&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;先生
				</div>
				<li class="li">固定电话：07555-88888</li>
				<li class="li">手机号码:1888888888</li>
			</div>
			<div class="quxn" @click="show23 = false">取消</div>
		</u-popup>
		<u-popup :show="show24" :round="10" closeOnClickOverlay closeable="true" mode="bottom" @close="close"
			@open="open">
			<div class="conuui">

				<div class="titnoss">更多操作</div>
				<div class="cozos1">
					<div class="div" @click="wjjp">
						<u-icon name="question-circle-fill" color="#999999" size="20"></u-icon>
						写新跟进
					</div>
					<div class="div" @click="show22 = true">
						<u-icon name="list-dot" color="#999999" size="20"></u-icon>
						新建任务
					</div>
					<div class="div" @click="show23 = true">
						<u-icon name="map-fill" color="#999999" size="20"></u-icon>
						拨打电话
					</div>
					<div class="div" @click="ggdo">
						<u-icon name="more-dot-fill" color="#999999" size="20"></u-icon>
						更多操作
					</div>
					<div class="div" @click="wjjp">
						<u-icon name="question-circle-fill" color="#999999" size="20"></u-icon>
						写新跟进
					</div>
					<div class="div" @click="show22 = true">
						<u-icon name="list-dot" color="#999999" size="20"></u-icon>
						新建任务
					</div>
					<div class="div" @click="show23 = true">
						<u-icon name="map-fill" color="#999999" size="20"></u-icon>
						拨打电话
					</div>
					<div class="div" @click="ggdo">
						<u-icon name="more-dot-fill" color="#999999" size="20"></u-icon>
						更多操作
					</div>
					<div class="div" @click="wjjp">
						<u-icon name="question-circle-fill" color="#999999" size="20"></u-icon>
						写新跟进
					</div>
					<div class="div" @click="show22 = true">
						<u-icon name="list-dot" color="#999999" size="20"></u-icon>
						新建任务
					</div>
					<div class="div" @click="show23 = true">
						<u-icon name="map-fill" color="#999999" size="20"></u-icon>
						拨打电话
					</div>
					<div class="div" @click="ggdo">
						<u-icon name="more-dot-fill" color="#999999" size="20"></u-icon>
						更多操作
					</div>
					<div class="div" @click="wjjp">
						<u-icon name="question-circle-fill" color="#999999" size="20"></u-icon>
						写新跟进
					</div>
					<div class="div" @click="show22 = true">
						<u-icon name="list-dot" color="#999999" size="20"></u-icon>
						新建任务
					</div>
					<div class="div"></div>
					<div class="div"></div>
				</div>
			</div>
		</u-popup>
		<div class="cozo">
			<div class="div" @click="wjjp">
				<u-icon name="question-circle-fill" color="#999999" size="20"></u-icon>
				写新跟进
			</div>
			<div class="div" @click="show22 = true">
				<u-icon name="list-dot" color="#999999" size="20"></u-icon>
				新建任务
			</div>
			<div class="div" @click="show23 = true">
				<u-icon name="map-fill" color="#999999" size="20"></u-icon>
				拨打电话
			</div>
			<div class="div" @click="ggdo">
				<u-icon name="more-dot-fill" color="#999999" size="20"></u-icon>
				更多操作
			</div>
		</div>
		<div class="cozo1"></div>
	</div>
</template>

<script>
	import CrunchBost from '@/components/crunch_bost.vue'
	import Informationsss from '@/components/informationsss.vue'
	import Evaluate from '@/components/evaluate.vue'
	import Attachment from '@/components/attachment.vue'
	import Examine from '@/components/examine.vue'
	export default {
		onLoad(option) {
			console.log(option)
			const {
				detail
			} = option
			const {
				information,
				type,
				author,
				time
			} = JSON.parse(detail)
			// this.crun_author = author
			this.crun_type = type
			this.crun_time = time
			// console.log(this.crun_author)
			// console.log(this.crun_type)
			// console.log(this.crun_obj)
			// console.log(this.crun_time)
		},
		data() {
			return {
				show22: false,
				show23: false,
				show24: false,
				crun_author: '赵小刚', //作者 
				crun_type: '', //类型
				list: ['客户动态', '资料详情', '任务记录', '更多信息'], //数据
				crun_obj: {
					author: "赵小刚"
				},
				crun_time: '', //传递过来的用来进行刚开始的时间
				active: '客户动态'

			}
		},
		methods: {
			tab_tit(val) {
				this.active = val
			},
			wjjp() {
				console.log('新建任务')
				uni.navigateTo({
					url: '/pages/message/crunch/xbjmrfwu/xbjmrfwu'
				})
			},
			tvhv() {
				console.log('退回工单')
				uni.navigateTo({
					url: '/pages/message/crunch/tvhv/tvhv'
				})
			},
			wdqb() {
				console.log('外勤签到')
				uni.navigateTo({
					url: '/pages/message/crunch/wdqb/wdqb'
				})
			},
			ggdo() {
				console.log('更多操作')
				this.show24 = true

			},
			pd() {
				uni.navigateTo({
					url: '/pages/message/crunch/putsrfwu/putsrfwu'
				})
			},
			xr() {
				uni.navigateTo({
					url: '/pages/message/crunch/gfjb/gfjb'
				})
			},
			close() {
				this.show24 = false
				// console.log('close');
			}

		},
		components: {
			CrunchBost,
			Informationsss,
			Evaluate,
			Attachment,
			Examine,
		}
	}
</script>

<style scoped lang="scss">
	.conuui{
		width: 100%;
		height: 500rpx;
	}
	.titnoss {
		width: 100%;
		height: 100rpx;
		font-weight: 700;
		text-align: center;
		line-height: 100rpx;
	}

	.quxn {
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #3478f7;
	}

	.ulssss {
		width: 100%;
		// border-radius: 40rpx;
		border-bottom: 40rpx solid #a7a7a7;

		.top {
			width: 100%;
			height: 200rpx;
			line-height: 200rpx;
			text-align: center;
			color: #a7a7a7;
		}

		// height: 30px;
		// background-color: saddlebrown;
		.li {
			width: 100%;
			height: 100rpx;
			border-top: 1rpx solid #f2f2f2;
			text-align: center;
			color: #3478f7;
			line-height: 100rpx;
		}
	}

	.cozo1 {
		width: 100%;
		height: 100rpx;
	}

	.cozos1 {
		width: 100%;
		height: 100rpx;
		background-color: white;
		border-top: 1px solid #eee;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-evenly;
		// position: fixed;
		// bottom: 0rpx;

		// text-align: center;
		.div {
			// text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 25rpx;
			height: 100rpx;
			width: 25%;
			color: #999999;
		}
	}

	.cozo {
		width: 100%;
		height: 100rpx;
		background-color: white;
		border-top: 1px solid #eee;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		position: fixed;
		bottom: 0rpx;

		// text-align: center;
		.div {
			// text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 25rpx;
			color: #999999;
		}


	}

	.steps {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 300px;
		margin: 0 auto;
		padding: 10rpx 0rpx;
	}

	.step {
		position: relative;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: gray;
		color: white;
		text-align: center;
		line-height: 20px;
		z-index: 1;
	}

	.line {
		position: relative;
		width: 100%;
		height: 2px;
		background-image: linear-gradient(to right, #52c1f5 50%, orange 50%);
		z-index: 0;
	}

	.line:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 50%;
		height: 100%;
		background-color: #52c1f5;
		z-index: 1;
	}

	.line:after {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		width: 50%;
		height: 100%;
		background-color: #e4e4e4;
		z-index: 1;
	}

	.step {
		// margin-top: 20rpx;
		width: 25rpx;
		height: 25rpx;
		border-radius: 50%;
		background-color: gray;
		color: white;
		text-align: center;
		line-height: 30px;
	}

	.step:first-child {
		background-color: #52c1f5;
	}

	.step:last-child {
		background-color: #e4e4e4;
	}

	.crunch {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		font-size: 30rpx;
		background-color: #f9f9f9;

		.crun_top {
			border-top: 1px solid #f2f2f2;
			background-color: white;

			.ul {
				width: 100%;
				height: 300rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-evenly;
				padding: 0px 20rpx;

				.li {
					width: 33.3%;
					text-align: center;

					.yk {
						margin-top: 10rpx;
						color: #d6ccd6;
					}

					.mn {
						margin-top: 10rpx;
						color: #999999;
						font-size: 28rpx;
					}
				}
			}
		}

		.crun_con {
			height: 120rpx;
			width: 100%;
			margin-top: 20rpx;
			background-color: white;
			padding: 10px 30rpx;
			color: #cfd0db;

			.con_bot {
				width: 100%;
				display: flex;
				font-size: 25rpx;
				justify-content: space-between;
			}
		}

		.crun_bot {
			width: 100%;
			height: auto;
			margin-top: 40rpx;
			background-color: white;


			.active {
				color: #3478f7;
			}

			.top {
				width: 100%;
				height: 80rpx;
				display: flex;
				font-size: 30rpx;
				justify-content: space-evenly;
				align-items: center;
			}

		}
	}
</style>